import { Spin, Tabs } from 'antd';
import { LabeledValue } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { getSettings, getUserMsg, getUserWorks, InitUserDetail, IUserDetail, IWorkItem } from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import Goback2Top from '../../components/Goback2Top';
import Radio from '../Radio/Radio';
import './Discovery.scss';

type IPropsIndex = RouteComponentProps;

export default function Discovery(props: IPropsIndex) {
	const [dataList, setDataList] = useState<IWorkItem[]>([]);
	const [workType, setWorkType] = useState<'hottest' | 'newest'>('hottest');
	const [tabType, setTabType] = useState(0);
	const [tabOption, setTabOption] = useState<LabeledValue[]>([]);
	const [loading, setLoading] = useState(true);
	const [userDetail, setUserDetail] = useState<IUserDetail>(InitUserDetail);

	useEffect(() => {
		fetchData(workType, tabType);
		getSettings().then((res) => {
			const tabs = res.data.scratch_tags;
			setTabOption([{ label: '全部', value: 0 }, ...tabs.map((item) => ({ label: item.name, value: item.id }))]);
		});
	}, []);

	const fetchData = (sort?: 'hottest' | 'newest', tag?: number) => {
		setLoading(true);
		getUserWorks({
			offset: 0,
			limit: 1000,
			sort,
			tag,
		})
			.then((res) => {
				setDataList(res.items);
			})
			.catch((err) => {})
			.finally(() => setLoading(false));
	};

	const ListItem = (item: IWorkItem) => {
		return (
			<div className="mr20 mb32 bg-w ov-h" style={{ borderRadius: 6 }}>
				<div
					className="w220 h156 bg-theme2 br0 ov-h cp"
					onClick={() => {
						props.history.push(`/workDetail/${item.id}`);
					}}
				>
					<img className="w100" src={item.cover} alt="" />
				</div>
				<div className="pb14 plr8 w220">
					<div className="strong pt8">{item.name}</div>
					<div className="d-f ac pt8">
						<img className="mr12" src={require('../../image/good.png').default} alt="" />
						<span>{item.num_likes}</span>
						<img className="mlr12" src={require('../../image/eye.png').default} alt="" />
						<span>{item.num_views}</span>
					</div>
					<div
						className="d-f ac pt8 w100 ellip1 cp"
						onClick={() => {
							props.history.push(`/userIndex/${item.creator.uid}`);
						}}
					>
						<img
							className="w32 br100"
							src={item.creator.avatar || require('../../image/user2.png').default}
						/>
						<span className="c-hint-b pl6 ellip1">{item.creator.name}</span>
					</div>
				</div>
			</div>
		);
	};

	return (
		<div className="content userCenter">
			<Goback2Top />
			<div>
				<div className="d-f jc">
					<div className="w1200 br10 p-r pt16">
						<div className="d-f ac">
							<span className="strong fs36">发现</span>
							<div className="ml16">
								<Radio.GroupCustom
									coreClassName="radio-custom1"
									value={workType}
									onChange={(e) => {
										const value: any = e.target.value;
										fetchData(value, tabType);
										setWorkType(value);
									}}
									option={[
										{ label: '热门作品', value: 'hottest' },
										{ label: '最新作品', value: 'newest' },
									]}
								/>
							</div>
						</div>
						<div className="ptb20">
							<Radio.GroupCustom
								coreClassName="radio-custom2"
								value={tabType}
								onChange={(e) => {
									const value: any = e.target.value;
									fetchData(workType, value);
									setTabType(Number(value));
								}}
								option={tabOption}
							/>
						</div>
						<Spin spinning={loading}>
							<div className="d-f fw">
								{dataList.map((item) => (
									<ListItem {...item} key={`dis${item.id}`} />
								))}
							</div>
						</Spin>
					</div>
				</div>
			</div>
			<Footer {...props} />
		</div>
	);
}
